<template>
    <div class="app-container">
        <!-- 新增车辆---权限分配 -->
        <div>
            <div v-show="elsteps1">
                <el-steps :active="active" finish-status="success" align-center space="200px">
                    <el-step title="车辆信息"></el-step>
                    <el-step title="权限分配"></el-step>
                </el-steps>
            </div>
            <el-form label-width="100px" :model="inputModel" :inline="true" :rules="rules" class="form1">
                <el-form-item label="有效期：" prop="lifeSpan">
                    <el-radio-group v-model="inputModel.lifeSpan" @change="changeTimeRadio">
                        <el-radio label="1天"></el-radio>
                        <el-radio label="1周"></el-radio>
                        <el-radio label="1月"></el-radio>
                        <el-radio label="1年"></el-radio>
                        <el-radio label="永久"></el-radio>
                        <el-radio label="自定义"></el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <el-form label-width="100px" :inline="true" :model="inputModel" :rules="rules" class="form1">
                <el-form-item label="有效期起：" prop="validFrom">
                    <el-date-picker v-model="inputModel.validFrom" type="date" placeholder="选择日期"
                        @change="changeStartTime">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="有效期止：" prop="expiryDate">
                    <el-date-picker v-model="inputModel.expiryDate" type="date" placeholder="选择日期"
                        @change="changeEndTime">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <el-form label-width="100px" :model="inputModel" :inline="true" :rules="rules" class="form1">
                <el-form-item label="通行次数：" prop="passesNumberList">
                    <el-radio-group v-model="inputModel.passesNumberList" @change="changeRadio">
                        <el-radio label="不限次数"></el-radio>
                        <el-radio label="1次"></el-radio>
                        <el-radio label="自定义"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <el-input style="width: 60px;margin-left: 10px;" v-model="inputModel.passesNumber" size="mini"
                        @change="changePassesNumber">
                    </el-input> 次
                </el-form-item>
            </el-form>
            <el-form label-width="125px" :model="inputModel" :rules="rules" class="form1">
                <el-form-item label="可通行进场门禁:" prop="enterAccess">
                    <el-input style="width: 520px;" readonly v-model="inputModel.enterAccess" placeholder=""
                        suffix-icon="el-icon-search" @focus="dialogStartUp(0)"></el-input>
                </el-form-item>
                <el-form-item label="可通行出场门禁:" prop="leaveAccess">
                    <el-input style="width: 520px;" readonly v-model="inputModel.leaveAccess" placeholder=""
                        suffix-icon="el-icon-search" @focus="dialogStartUp1(1)"></el-input>
                </el-form-item>
            </el-form>
            <el-button style="margin-left:18%;width: 82px;" type="primary" @click="next">提交</el-button>
            <el-button style="margin-left:0.15rem;" type="primary" @click="back" v-show="elsteps1">上一步</el-button>
            <el-button style="margin-left:0.15rem;" @click="cancel">取消</el-button>
            <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible1" width="20%">
                <el-form :label-width="labelWidth" :model="inputModel" :inline="true">
                    <el-form-item label="门禁名称:" prop="name">
                        <el-input class="input-width" v-model="filterText"></el-input>
                    </el-form-item>
                    <el-tree class="filter-tree" :data="data" :props="defaultProps" default-expand-all
                        :filter-node-method="filterNode" ref="tree" show-checkbox @check-change="handleCheckChange">
                    </el-tree>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button style="margin-top:1rem;" @click="dialogFormVisible1 = false">取 消</el-button>
                    <el-button type="primary" @click="dialogDetermine">确 定</el-button>
                </span>
            </el-dialog>
            <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="20%">
                <el-form :label-width="labelWidth" :model="inputModel" :inline="true">
                    <el-form-item label="门禁名称:" prop="name">
                        <el-input class="input-width" v-model="filterText"></el-input>
                    </el-form-item>
                    <el-tree class="filter-tree" :data="initData" :props="defaultProps" default-expand-all
                        :filter-node-method="filterNode" ref="tree" show-checkbox @check-change="handleCheckChange">
                    </el-tree>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button style="margin-top:1rem;" @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogDetermine">确 定</el-button>
                </span>
            </el-dialog>

        </div>
    </div>
</template>
<script>
import { inserApiCar, getApiAccessList } from "@/api/Car";
import { insertApiCarAuthorizeEd } from "@/api/CarAuthorize";
export default {
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
            console.log(val);
        }
    },
    name: "addVehiclePower",
    props: ['elsteps', 'elsplateNumber'],
    data() {
        return {
            carJurisdictionData: {
                plateNumber: "",
                timeValidityType: 1,
                startTime: "",
                endTime: "",
                passesNumberType: -1,
                passesNumber: 0,
                finitePassesNumber: 0,
                state: 0,
                carAccessControlData: [
                ]
            },
            elsteps1: this.elsteps,
            elsplateNumber1: this.elsplateNumber,
            type: 0, //判断是选择了进场门禁还是出场门禁
            validFrom: '',
            expiryDate: '',
            filterText: '',
            dialogTitle: '选择进场门禁',
            dialogFormVisible: false,
            dialogFormVisible1: false,
            active: 0,
            labelWidth: "80PX",
            previousList: {},
            inputModel: {
                resource: {},
                validFrom: '',
                expiryDate: '',
                lifeSpan: '',
                passesNumberList: {},
                passesNumber: '',
                leaveAccess: '',
                enterAccess: '',
                searchName: '',
            },
            rules: {
                lifeSpan: [{ required: true, message: '请选择有效期', trigger: 'blur' }],
                validFrom: [{ required: true, trigger: 'blur' }],
                expiryDate: [{ required: true, trigger: 'blur' }],
                passesNumberList: [{ required: true, trigger: 'blur' }],
                delivery: [{ required: true, trigger: 'blur' }],
                // leaveAccess: [{ required: true, trigger: 'blur' }],
                // enterAccess: [{ required: true, trigger: 'blur' }],
            },
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            enterAccessData: [],
            leaveAccessData: [],
            data: [],
            initData: [],
            outTransitData: [],
            inTransitData: []
        }
    },
    created() {
        if (typeof this.elsteps1 == 'undefined') {
            this.elsteps1 = true;
            this.previousList = this.$route.query.inputModel;
        } else {
            console.log(this.elsplateNumber1, "elsplateNumber");
            this.previousList.plateNumber = this.elsplateNumber1;
        }
        this.active = Number(this.$route.query.active);

        this.getApiInAccessList();
        this.getApiOutAccessList();
    },
    methods: {
        getApiInAccessList() {
            let data = {
                inOrOut: 1
            };
            getApiAccessList(data).then(res => {
                console.log(res);
                res.forEach(item => {
                    this.initData.push({ id: item.id, label: item.name, checked: false });
                });
            });
        },
        getApiOutAccessList() {
            let data = {
                inOrOut: 2
            };
            getApiAccessList(data).then(res => {
                console.log(res);
                res.forEach(item => {
                    this.data.push({ id: item.id, label: item.name, checked: false });
                });
            });
        },
        handleCheckChange(data, checked) {
            if (this.type) {
                this.data.forEach(element => {
                    if (element.id == data.id) {
                        element.checked = checked;
                    }
                });
            } else {
                this.initData.forEach(element => {
                    if (element.id == data.id) {
                        element.checked = checked;
                    }
                });
            }
        },
        changePassesNumber() {
            this.inputModel.passesNumberList = "自定义";
            this.carJurisdictionData.passesNumber = Number(this.inputModel.passesNumber);
        },
        changeRadio(items) {
            if (items == "不限次数") {
                this.carJurisdictionData.passesNumberType = 0;
                this.carJurisdictionData.passesNumber = 99999;
                this.inputModel.passesNumber = "";
            } else if (items == "1次") {
                this.carJurisdictionData.passesNumberType = 1;
                this.carJurisdictionData.passesNumber = 1;
                this.inputModel.passesNumber = "";
            }
            else {
                this.carJurisdictionData.passesNumberType = 1;
                this.carJurisdictionData.passesNumber = this.inputModel.passesNumber;
            }
        },
        changeTimeRadio(items) {
            if (items == "1天") {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() + 3600 * 1000 * 24 * 1);
                end.setTime(end.getTime() + 3600 * 1000 * 24 * 1);
                this.inputModel.validFrom = start;
                this.inputModel.expiryDate = end;
                this.validFrom = start;
                this.expiryDate = end;
                this.carJurisdictionData.timeValidityType = 1;
            }
            if (items == "1周") {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() + 3600 * 1000 * 24 * 1);
                end.setTime(start.getTime() + 3600 * 1000 * 24 * 7);
                this.inputModel.validFrom = start;
                this.inputModel.expiryDate = end;
                this.validFrom = start;
                this.expiryDate = end;
                this.carJurisdictionData.timeValidityType = 2;
            }
            else if (items == "1月") {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() + 3600 * 1000 * 24 * 1);
                end.setTime(start.getTime() + 3600 * 1000 * 24 * 30);
                this.inputModel.validFrom = start;
                this.inputModel.expiryDate = end;
                this.validFrom = start;
                this.expiryDate = end;
                this.carJurisdictionData.timeValidityType = 3;
            }
            else if (items == "1年") {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() + 3600 * 1000 * 24 * 1);
                end.setTime(start.getTime() + 3600 * 1000 * 24 * 365);
                this.inputModel.validFrom = start;
                this.inputModel.expiryDate = end;
                this.validFrom = start;
                this.expiryDate = end;
                this.carJurisdictionData.timeValidityType = 4;
            }
            else if (items == "永久") {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() + 3600 * 1000 * 24 * 1);
                end.setTime(start.getTime() + 3600 * 1000 * 24 * 36500);
                this.inputModel.validFrom = start;
                this.inputModel.expiryDate = end;
                this.validFrom = start;
                this.expiryDate = end;

            } else {
                this.carJurisdictionData.timeValidityType = 99;
            }
        },
        changeStartTime(v) {
            if (this.validFrom.length == 0) {
                this.validFrom = v;
                this.inputModel.lifeSpan = "自定义"
            }
            let startDate = new Date(this.validFrom)
            if (String(startDate).substring(0, 15) != String(v).substring(0, 15)) {
                this.inputModel.lifeSpan = "自定义"
            }
        },
        changeEndTime(v) {
            if (this.expiryDate.length == 0) {
                this.expiryDate = v;
                this.inputModel.lifeSpan = "自定义"
            }
            let endDate = new Date(this.expiryDate)
            if (String(endDate).substring(0, 15) != String(v).substring(0, 15)) {
                this.inputModel.lifeSpan = "自定义"
            }
        },
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        back() {
            this.$router.push(
                {
                    path: 'addVehicleInfo',
                    query: {
                        active: 0,
                        inputModel: this.previousList,
                        isback: true
                    }
                })
        },
        cancel() {
            this.$router.push({
                path: "vehicleManagement"
            })
        },
        next() {
            let list = [];
            if (this.carJurisdictionData.timeValidityType == 1) {
                return this.$message.error("请选择有效期");
            }
            if (this.inputModel.validFrom.length == 0 || this.inputModel.expiryDate == 0) {
                return this.$message.error("请选择有效期起始时间");
            }
            if (this.carJurisdictionData.passesNumberType == -1) {
                return this.$message.error("请选择通行次数");
            } else if (this.carJurisdictionData.passesNumberType == 1) {
                if (this.carJurisdictionData.passesNumber == 0) {
                    return this.$message.error("请输入自定义通行次数");
                }
            }
            this.data.forEach(item => {
                if (item.checked == true) {
                    list.push({
                        type: 2,
                        accessId: item.id
                    })
                }
            });
            this.initData.forEach(item => {
                if (item.checked == true) {
                    list.push({
                        type: 1,
                        accessId: item.id
                    })
                }
            });
            if (this.elsteps1) {
                let data = {
                    carBaseData: {
                        plateNumber: this.previousList.plateNumber,
                        plateColor: this.previousList.plateColor,
                        carCategory: this.previousList.carCategory,
                        carType: this.previousList.carType,
                        driverName: this.previousList.driverName,
                        driverTel: this.previousList.driverTel,
                        driverIDNumber: this.previousList.driverIDNumber,
                        state: this.previousList.state ? 1 : 0,
                        remarks: this.previousList.remarks,
                    },
                    carJurisdictionData: {}
                }
                data.carJurisdictionData.plateNumber = this.previousList.plateNumber;
                data.carJurisdictionData.timeValidityType = this.carJurisdictionData.timeValidityType;
                data.carJurisdictionData.startTime = this.inputModel.validFrom;
                data.carJurisdictionData.endTime = this.inputModel.expiryDate;
                data.carJurisdictionData.passesNumberType = this.carJurisdictionData.passesNumberType;
                data.carJurisdictionData.passesNumber = this.carJurisdictionData.passesNumber;
                data.carJurisdictionData.finitePassesNumber = 0;
                data.carJurisdictionData.state = 1;
                data.carJurisdictionData.carAccessControlData = list;
                inserApiCar(data).then(res => {
                    this.$router.push(
                        {
                            path: 'vehicleManagement',
                        });
                    this.$message({
                        message: '添加成功！',
                        type: 'success'
                    });
                });
            } else {
                let data = {
                }
                data.plateNumber = this.previousList.plateNumber;
                data.timeValidityType = this.carJurisdictionData.timeValidityType;
                data.startTime = this.inputModel.validFrom;
                data.endTime = this.inputModel.expiryDate;
                data.passesNumberType = this.carJurisdictionData.passesNumberType;
                data.passesNumber = this.carJurisdictionData.passesNumber;
                data.finitePassesNumber = 0;
                data.state = 1;
                data.accesses = list;
                console.log(data)
                insertApiCarAuthorizeEd(data).then(res => {
                    this.$emit('backMain');
                    this.$message({
                        message: '添加成功！',
                        type: 'success'
                    });
                })
            }
        },
        dialogDetermine() {
            console.log(this.data, 1)
            console.log(this.initData, 2)
            if (this.type) {
                this.dialogFormVisible1 = false;
                this.inputModel.leaveAccess = "";
                this.leaveAccessData = this.data;
                this.leaveAccessData.forEach(item => {
                    if (item.checked) {
                        if (this.inputModel.leaveAccess.length == 0) {
                            this.inputModel.leaveAccess = item.label;
                        } else {
                            this.inputModel.leaveAccess += "、" + item.label;
                        }
                    }
                });
            } else {
                this.dialogFormVisible = false;
                this.inputModel.enterAccess = "";
                this.enterAccessData = this.initData;
                this.enterAccessData.forEach(item => {
                    if (item.checked) {
                        if (this.inputModel.enterAccess.length == 0) {
                            this.inputModel.enterAccess = item.label;
                        } else {
                            this.inputModel.enterAccess += "、" + item.label;
                        }
                    }
                });
            }
        },
        dialogStartUp(type) {
            this.type = type;
            this.dialogTitle = "可通行进场门禁";
            this.dialogFormVisible = true;
        },
        dialogStartUp1(type) {
            this.type = type;
            this.dialogTitle = "可通行出场门禁";
            this.dialogFormVisible1 = true;
        }
    }
}
</script>

<style lang="scss" scoped>
.main {
    margin: 0.2rem;
    padding: 0.2rem;
}

.form1 {
    margin-top: .1rem;
    margin-left: .4rem;
}

.form2 {
    margin-top: .1rem;
    margin-left: .3rem;
}

.interval-left {
    margin-left: .4rem;
}

.search-bar {
    margin-bottom: .2rem;
    margin-left: 10%;
    margin-top: .9rem;
}
</style>
